<template>
  <div>
    <div>
      <el-row>
        <el-col
          :span="20" :offset="2"
        >
          <!--        {{this.chosenClass}}-->
          <el-table
            stripe
            style="width: 100%"
            :data="stuHwList"
          >
            <el-table-column type="expand" fixed="left">
              <template slot-scope="props">
                <el-form label-position="left">
                  <el-form-item label="作答文本：">
                    <pre>
                      {{ props.row.assignmentContent }}
                    </pre>
                  </el-form-item>
                  <el-form-item label="作业附件：">
                    <el-button type="success" v-if="props.row.fileName!==null"
                               @click="downloadHw(props.$index,props.row)">
                      {{props.row.fileName}}
                    </el-button>
                    <el-tag type="warning" v-else>无附件</el-tag>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="学生姓名" sortable prop="studentName">
            </el-table-column>
            <el-table-column label="学生学号" sortable prop="studentId">

            </el-table-column>
            <el-table-column label="完成情况" prop="finishCond" sortable>
              <template slot-scope="scope">
                <el-tag :type="scope.row.finishCond==='按时完成'?'success':'warning'">
                  {{ scope.row.finishCond }}
                </el-tag>

              </template>
            </el-table-column>
            <el-table-column label="得分" sortable prop="score">
              <!--              <template slot-scope="scope">-->
              <!--                {}}-->
              <!--              </template>-->
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="rateHw(scope.$index, scope.row)">评分
                </el-button>

              </template>
            </el-table-column>

          </el-table>
        </el-col>
      </el-row>
    </div>

    <div class="dialog_sec">
      <el-dialog
        title="请打分（0-100）并提交评语"
        :visible.sync="rateVisible"
        width="30%"
        center
        destroy-on-close>
        <el-slider v-model="curScore" show-input show-stops>
        </el-slider>
        <el-input type="textarea" :rows="4" placeholder="请输入评语"
                  v-model="curComment">

        </el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelRate">取 消</el-button>
          <el-button type="primary" @click="confirmRate">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import qs from 'qs'
import tc from "../../../store/teacher"

export default {
  name: "CorrectingHw",
  props: ['chosenClass', 'chosenAssignmentId'],
  computed: {
    stuList() {
      return tc.getters.getStuList
    },
  },
  async mounted() {
    for (let i = 0; i < this.stuList.length; i++) {
      await axios.post("/api/getAssignmentAnswerInfo",
        qs.stringify({
          courseId: this.chosenClass.courseId,
          assignmentId: this.chosenAssignmentId,
          userEmail: this.stuList[i].email
        })).then(res => {
        this.stuHwList.push({
          studentName: this.stuList[i].studentName,
          studentId: this.stuList[i].studentId,
          assignmentContent: res.data.fileDescription,
          finishCond: (res.data.fileDescription !== null || res.data.fileName !== null) ? '按时完成' : '尚未提交',
          fileName: res.data.fileName,
          score: res.data.score,
        })
      })
    }
  },
  data() {
    return {
      // college: "计算机科学与技术学院"
      // email: "3180103435@zju.edu.cn"
      // enrollmentYear: 2018
      // major: "软件工程"
      // studentClass: null
      // studentId: "3180103435"
      // studentName: "马静怡"
      // studentType: 0
      // telephone: null
      stuHwList: [
        // {
        //   studentName: '学生2',
        //   studentId: 'stuid2',
        //   assignmentContent: "1+1=2",
        //   finishCond: '按时完成',
        //   fileName: '附件1.txt',
        //   score: 60,
        //
        // },

      ],

      rateVisible: false,
      curScore: 60,
      curComment: '',


      row: null,
    }
  },
  methods: {
    rateHw(index, row) {
      this.curScore = row.score
      this.curIndex = index
      this.rateVisible = true


    },
    cancelRate() {
      this.rateVisible = false
      this.curScore = 60
      this.curIndex = -1
    },
    confirmRate() {
      axios.post('/api/correctAssignmentAnswer', qs.stringify({
        courseId: this.chosenClass.courseId,
        assignmentId: this.chosenAssignmentId,
        userEmail: this.stuList[this.curIndex].email,
        teacherComments: this.curComment,
        score: this.curScore
      })).then(res => {
        console.log(res)
        if (res.data.state) {
          this.$message.success('批改成功')
          this.stuHwList[this.curIndex].score = this.curScore
          this.curScore = 60
          this.curIndex = -1
          this.rateVisible = false
        }
      })

    },

    downloadHw(index, row) {
      this.$message.info('附件下载中，请稍后')
      this.$global.downloadHwFile(
        this.chosenClass.courseId,
        this.chosenAssignmentId,
        this.stuList[index].email,
        row.fileName
      )


    },

  },
}
</script>

<style scoped>

</style>
